<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- CSS only -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/ssq/dropzone.min.css" rel="stylesheet">
    <link href="/ssq/index.css" rel="stylesheet">
</head>
<body>
<main>

    <section class="py-4 text-center container">
        <div class="row py-lg-2">
            <div class="col-lg-6 col-md-8 mx-auto">
                <div class="mb-3">
<!--                    <input class="form-control" type="file" accept="image/*" id="formFile">-->
                    <div class="upload-box1"></div>
                </div>
                <div id="dataBody" class="ocr-ssq-item">


                </div>
            </div>
        </div>
    </section>

    <div class="album py-1 bg-light">
        <div class="container">
            <h5 style="text-align: center">历史开奖信息</h5>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

                <div th:each="ssq : ${ssqList}" class="col ssq-item">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted"><span th:text="${ssq.code}"></span> 期</h6>
                            <h6 class="card-text">
                                <span th:text="${ssq.red1}" class="red"></span>
                                <span th:text="${ssq.red2}" class="red"></span>
                                <span th:text="${ssq.red3}" class="red"></span>
                                <span th:text="${ssq.red4}" class="red"></span>
                                <span th:text="${ssq.red5}" class="red"></span>
                                <span th:text="${ssq.red6}" class="red"></span>
                                <span th:text="${ssq.blue1}" class="blue"></span>
                            </h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">开奖日期：<span th:text="${ssq.drawDate}"></span></small>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


</main>
</body>
<!-- JavaScript Bundle with Popper -->
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/ssq/jquery.min.3.1.0.js"></script>
<script src="/ssq/dropzone.min.js"></script>
<script th:inline="javascript">
var bel = $("#dataBody");
function vNum(num, s, e){
    if (isNaN(num)) return false;
    var n = parseInt(num);
    return n >= s && n <= e;
}

function updateOcrData(data){
    var title = '<h6 class="card-subtitle mb-2 text-muted"><span>'+data.code+'</span>期 开奖日期: '+data.drawDate+'</h6>';
    var tags = ['<div class="card shadow-sm"><div class="card-body">',title];
    for(var i in data.noteDtos){
        tags.push('<h6 class="card-text">');
        var note = data.noteDtos[i];
        tags.push('<span>'+note['zm']+'</span>');
        for(var num = 1; num <= 6; num++){
            var key = 'red' + num;
            var keyf = 'red' + num + 'f';
            var cls = note[keyf] ? 'num red redf' : 'num red';
            cls = vNum(note[key],1,33) ? cls : 'num err';
            tags.push('<span class="'+cls+'">'+note[key]+'</span>');
        }
        var cls = note['blue1f'] ? 'num blue bluef' : 'num blue';
        cls = vNum(note['blue1'],1,16) ? cls : 'num err';
        tags.push('<span class="'+cls+'">'+note['blue1']+'</span>');
        tags.push('<span>'+note['reward']+'</span>');
        tags.push('<span>'+note['bonus']+'</span>');
        tags.push('</h6>');
    }
    tags.push('</div></div>');
    bel.html(tags.join('\n'));
}

    var typeArrays = ".png, .jpg, .jpeg, .ico, .bmp, .gif";


    //resizeWidth: 1024,  //缩放图片至1024宽度再上传
    //resizeQuality: 1,   //调整图片质量，最高为1

    var maxFileCount = 1;
    new Dropzone("div.upload-box1",
        {
            url: '/ssq/upload/img',
            paramName: "imgs",
            timeout: [[${request_timeout}]],
            acceptedFiles: typeArrays,
            createImageThumbnails: false,
            disablePreviews: true,
            maxFiles: maxFileCount,
            maxFilesize: 100, // 上传图片大小，单位：MB
            addRemoveLinks: true,
            parallelUploads: maxFileCount,
            dictDefaultMessage: '拖拽或点击上传图片',
            dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
            dictInvalidFileType: "文件类型只能是" + typeArrays,
            dictRemoveFile: "移除图片",
            dictMaxFilesExceeded: "您一次最多只能上传" + maxFileCount + "张图片！",
            dictResponseError: "上传图片失败！",
            init: function () {
                var $this = this;
                this.on("sending", function () {
                    $("#dataBody").html("<img src='/images/loading.gif' />");
                });
                this.on("success", function (file, data) {
                    $this.removeAllFiles();
                    console.log("success", file, data);
                    if(data && data.code == 200){
                        updateOcrData(data.data);
                    }else{
                        $("#dataBody").html(JSON.stringify(data));
                    }
                });
                this.on('error', function (files, data) {
                    $this.removeAllFiles();
                    console.log("error", files, data);
                    $("#dataBody").html(JSON.stringify(data));
                });
            }
        }
    );

</script>
</html>